import React, { Component } from "react";
import { Modal, Text, View, Button, TextInput, AsyncStorage, ToastAndroid } from "react-native";

export default class ModalPerson extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name,
            idcard,
            phone
        } = props.userInfo ? props.userInfo : {}
    }
    componentWillReceiveProps(nextProps) {
        let obj = {
            name,
            idcard,
            phone
        } = nextProps.userInfo ? nextProps.userInfo : { name: "", idcard: "", phone: "" }
        this.setState(obj)
    }
    addPerson = async () => {
        if (this.state.name && this.state.idcard && this.state.phone) {
            try {
                let persons = await AsyncStorage.getItem("persons")
                if (persons) {
                    persons = JSON.parse(persons)
                }
                else {
                    persons = {}
                }

                persons[this.state.name] = {
                    idcard: this.state.idcard,
                    phone: this.state.phone
                }

                await AsyncStorage.setItem("persons", JSON.stringify(persons))
                await AsyncStorage.setItem("person", this.state.name)
                return true
            }
            catch (e) {
                ToastAndroid.show(e.message, ToastAndroid.SHORT);
            }
        }
        else {
            ToastAndroid.show("填晒D野先啦!", ToastAndroid.SHORT);
        }
    }
    deletePerson = async () => {
        let persons = await AsyncStorage.getItem("persons")
        if (persons) {
            persons = JSON.parse(persons)
        }
        else {
            persons = {}
        }
        delete persons[this.state.name]
        await AsyncStorage.setItem("persons", JSON.stringify(persons))
        await AsyncStorage.removeItem("person")
    }
    render() {
        return (
            <Modal
                animationType="slide"
                transparent={false}
                visible={this.props.show}
                onRequestClose={() => {
                    this.props.close()
                }}
            >
                <View style={{ marginTop: 22 }}>
                    <View>
                        <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ width: 64 }}>姓名</Text>
                            <TextInput
                                style={{
                                    flex: 1,
                                    borderColor: 'gray',
                                    borderBottomWidth: 1
                                }}
                                onChangeText={(text) => this.setState({ name: text.trim() })}
                                value={this.state.name}>
                            </TextInput>
                        </View >
                        <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ width: 64 }}>身份证</Text>
                            <TextInput
                                style={{
                                    flex: 1,
                                    borderColor: 'gray',
                                    borderBottomWidth: 1
                                }}
                                onChangeText={(text) => this.setState({ idcard: text.trim() })}
                                value={this.state.idcard}>
                            </TextInput>
                        </View >
                        <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ width: 64 }}>手机号</Text>
                            <TextInput keyboardType="phone-pad"
                                style={{
                                    flex: 1,
                                    borderColor: 'gray',
                                    borderBottomWidth: 1
                                }}
                                onChangeText={(text) => this.setState({ phone: text.trim() })}
                                value={this.state.phone}>
                            </TextInput>
                        </View >
                        <View style={{ padding: 12, flexDirection: "row", justifyContent: 'center', alignItems: 'center' }}>
                            <View style={{ flex: 1 }}>
                                <Button
                                    onPress={() => {
                                        this.addPerson().then((vaild) => {
                                            if (vaild) {
                                                this.props.close()
                                            }
                                        })
                                    }}
                                    title="确认"
                                />
                            </View>
                            {this.props.userInfo ?
                                <View style={{ flex: 1 }}>
                                    <Button
                                        color="red"
                                        onPress={() => {
                                            this.deletePerson().then(() => {
                                                this.props.close()
                                            })
                                        }}
                                        title="删除"
                                    />
                                </View> : undefined
                            }
                            <View style={{ flex: 1 }}>
                                <Button
                                    color="green"
                                    onPress={() => this.props.close()}
                                    title="关闭"
                                />
                            </View>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}